<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阴阳师</title>
    <link rel="shortcut icon" href="pages/favicon.gif">
    <!--引入基础样式-->
    <link rel="stylesheet" href="./css/reset.css">
    <!--引入楼层特效css文件-->
    <link rel="stylesheet" href="./css/demo.css">

    <!--引入animate.css样式文件-->
    <link rel="stylesheet" href="./css/animate.css">


    <!--引入音乐导航栏-->
    <script src="./js/myFunc.js"></script>

    <!--引入jQuery库文件-->
    <script src="./js/jquery-1.12.2.js"></script>

    <!--引入jq特效-->
    <script src="./js/jqindex.js"></script>
    <!--引入楼层特效js文件-->
    <script src="./js/floor.js"></script>


    <!--引入轮播特效-->
    <script src="./js/swiperDemo.js"></script>
    <script src="./js/animate.js"></script>

    <!--引入娱乐拖拽特效-->
    <!--<script src="./js/jquery-1.12.2.js"></script>-->
    <script src="ui/jquery.ui.core.js"></script>
    <script src="ui/jquery.ui.widget.js"></script>
    <script src="ui/jquery.ui.mouse.js"></script>
    <script src="ui/jquery.ui.sortable.js"></script>
    <script type="text/javascript">
        $(function(){
            $('.happy ul li').mouseover(function(e) {
                $(this).children('p,div').stop().animate({'bottom':'0px'},300);
            }).mouseout(function(e) {
                $(this).children('p,div').stop().animate({'bottom':'-25px'},300);
            });


            var num = 0;//存储背景图的垂直距离
            $('.happy ul li').each(function(index, element) {
                num = index * -25;
                $(element).children('p').css('background-position','15px '+num+'px');//直接用element来获取当前循环的元素
                //$('.con ul li').eq(index).children('p').css('background-position','15px '+num+'px');//用li的index来获取当前循环的元素
                //num -= 25;// num = num - 25;
            });
            $('.happy ul li div').fadeTo(0,0.5);

            /*			x
                        0 * -25 = 0
                        1 * -25 = -25
                        2 * -25 = -50
                        3 * -25 = -75
                        4 * -25 = -100*/
            $(".happy ul").sortable();
            $(".happy ul").disableSelection();

        })
    </script>



</head>
<body>
<!--楼层特效开始-->
<!--楼层电梯开始-->
<ul class="fixedmeau">
    <li class="active"><i>1F</i><span>音乐</span></li>
    <li><i>2F</i><span>壁纸</span></li>
    <li><i>3F</i><span>娱乐</span></li>
    <li><i>4F</i><span>男女</span></li>
    <li><i>5F</i><span>角色</span></li>
    <li><i>6F</i><span>商品</span></li>
    <li><i>7F</i><span>英雄</span></li>
<!--    <li><i>8F</i><span>母婴</span></li>
    <li><i>9F</i><span>食品</span></li>-->
    <!--<li><i>10F</i><span>图书</span></li>-->
    <!--<li><i>11F</i><span>服务</span></li>-->
</ul>
<!--楼层电梯结束-->

<!--返回顶部按钮开始-->
<div class="totop"><span>▲</span>Top</div>
<!--返回顶部按钮结束-->

<!--头部部分开始-->
<div class="header_box">
    <!--头部通栏开始-->
    <div class="header" id="header">
        <div class="head_top w" >
            <div class="header_logo fl">
                <span class="logo_txt logo_txt1" ></span>
                <span class="logo_txt logo_txt2" ></span>
                <span class="logo_txt logo_txt3" ></span>
            </div>
            <div class="header_nav fl">
                <ul class="mainList">
                    <li class="mNav"><a href="demo.html">官网首页</a></li>
                    <li class="line"></li>
                    <li class="mNav"><a href="javascript:void(0)">新闻资讯</a></li>
                    <li class="line"></li>
                    <li class="mNav"><a href="javascript:void(0)">游戏攻略</a></li>
                    <li class="line"></li>
                    <li class="mNav"><a href="javascript:void(0)">游戏特色</a></li>
                    <li class="line"></li>
                    <li class="mNav haveHide">
                        <a href="javascript:void(0)">同人专区</a>
                        <span class="arrow"></span>
                    </li>
                    <li class="line"></li>
                    <li class="mNav haveHide">
                        <a href="javascript:void(0)">官方渠道</a>
                        <span class="arrow"></span>
                    </li>
                </ul>
            </div>
            <div class="box header_search fr">
                <input type="text" id="searchVal" placeholder="请输入内容...">
                <input type="button" value="搜索" id="btn">
            </div>
        </div>
    </div>
    <!--头部通栏结束-->
    <!--头部轮播开始-->
    <div class="meau">
        <div class="head_swiper  w" >
            <!--旋转木马轮播图-->
            <div class="wrap" id="wrap">
                <div class="slide" id="slide">
                    <ul>
                        <li class="one"><a href="#"><img src="images/bingbing.gif" alt=""/></a></li>
                        <li class="two"><a href="#"><img src="images/lingengxin.gif" alt=""/></a></li>
                        <li class="three"><a href="#"><img src="images/yuanyuan.gif" alt=""/></a></li>
                        <li class="four"><a href="#"><img src="images/slidepic4.gif" alt=""/></a></li>
                        <li class="five"><a href="#"><img src="images/slidepic5.gif" alt=""/></a></li>
                    </ul>
                    <div class="arrow" id="arrow">
                        <a href="javascript:;" class="prev" id="arrLeft"></a>
                        <a href="javascript:;" class="next" id="arrRight"></a>
                    </div>
                </div>
            </div>
            <!--旋转木马轮播图-->
        </div>
    </div>
    <!--头部轮播结束-->
    <!--头部tab栏开始-->
    <div class="header_tab" >
        <div class="w">
            <nav id="nav">
                <ul id="ul">
                    <li><a href="">首页</a><span></span><audio src="./source/a1.mp3"></audio></li>
                    <li><a href="">新闻</a><span></span><audio src="./source/a2.mp3"></audio></li>
                    <li><a href="">视频</a><span></span><audio src="./source/a3.mp3"></audio></li>
                    <li><a href="">电台</a><span></span><audio src="./source/a4.mp3"></audio></li>
                    <li><a href="">娱乐</a><span></span><audio src="./source/a5.mp3"></audio></li>
                    <li><a href="">漫画</a><span></span><audio src="./source/a6.mp3"></audio></li>
                    <li><a href="">攻略</a><span></span><audio src="./source/a7.mp3"></audio></li>
                    <li><a href="">商城</a><span></span><audio src="./source/a8.mp3"></audio></li>
                    <li><a href="">团购</a><span></span><audio src="./source/a9.mp3"></audio></li>
                </ul>
            </nav>
        </div>
    </div>
    <!--头部tab栏结束-->
</div>
<!--头部部分结束-->

<!--侧栏广告开始-->
<div class="banner">
    <img src="./images/left_ad.png" class="left" width="150px">
    <img src="./images/right_ad.png" class="right" width="150px">
</div>
<!--侧栏广告结束-->

<!--楼层盒子部分开始-->
<div class="louceng_box">
    <div class="louceng" >
        <div class="title">音乐播放器<span>music</span></div>
        <div class="music con" >
            <ul>
                <li><img src="./images/lye.jpeg" alt=""></li>
                <li><img src="./images/lye1.png" alt=""></li>
                <li><img src="./images/lye2.jpg" alt=""></li>
                <li><img src="./images/lye3.jpg" alt=""></li>
                <li><img src="./images/lye4.jpg" alt=""></li>
                <li><img src="./images/lye5.jpg" alt=""></li>
            </ul>
            <img src="./images/love.jpg" alt="love" class="love">
            <audio src="./source/bgm.mp3" autoplay="autoplay" loop="loop" controls="controls"></audio>
        </div>
    </div>
    <div class="louceng" style="background: url('./images/bg_framework_866af1c.png');background-size:cover;">
        <div class="title">壁纸轮播图<span>picture</span></div>
        <div class="news con" style="background: none;">
            <div id="slider" class="slider">
                <div id="slider_scroll" class="slider-scroll">
                    <div class="slider-main" id="slider_main">
                        <div class="slider-main-img">
                            <a href="">
                                <img src="./images/lye.jpeg" alt="">
                            </a>
                        </div>
                        <div class="slider-main-img">
                            <a href="">
                                <img src="./images/lye1.png" alt="">
                            </a>
                        </div>
                        <div class="slider-main-img">
                            <a href="">
                                <img src="./images/lye2.jpg" alt="">
                            </a>
                        </div>
                        <div class="slider-main-img">
                            <a href="">
                                <img src="./images/lye3.jpg" alt="">
                            </a>
                        </div>
                        <div class="slider-main-img">
                            <a href="">
                                <img src="./images/lye4.jpg" alt="">
                            </a>
                        </div>
                        <div class="slider-main-img">
                            <a href="">
                                <img src="./images/lye5.jpg" alt="">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="slider-ctl" id="slider_ctl">
                    <span class="slider-ctl-prev"></span>
                    <span class="slider-ctl-next"></span>
                </div>
            </div>
            <!--<script src="./js/myFunc.js"></script>-->
            <!--<script src="./js/index.js"></script>-->
        </div>
    </div>
    <div class="louceng" style="background: url('./images/bg_framework_866af1c.png');background-size:cover;">
        <div class="title">娱乐 <span>happy</span></div>
        <div class="happy con" style="background: none;">
            <ul>
                <li>
                    <img src="images/nav/01.JPG" width="183" height="125" />
                    <div></div>
                    <p>百度一下你就知道</p>
                </li>
                <li>
                    <img src="images/nav/02.JPG" width="183" height="125" />
                    <div></div>
                    <p>百度一下你就知道</p>
                </li>
                <li>
                    <img src="images/nav/03.JPG" width="183" height="125" />
                    <div></div>
                    <p>百度一下你就知道</p>
                </li>
                <li>
                    <img src="images/nav/04.JPG" width="183" height="125" />
                    <div></div>
                    <p>百度一下你就知道</p>
                </li>
                <li>
                    <img src="images/nav/05.JPG" width="183" height="125" />
                    <div></div>
                    <p>百度一下你就知道</p>
                </li>
                <li>
                    <img src="images/nav/06.JPG" width="183" height="125" />
                    <div></div>
                    <p>百度一下你就知道</p>
                </li>
                <li>
                    <img src="images/nav/07.JPG" width="183" height="125" />
                    <div></div>
                    <p>百度一下你就知道</p>
                </li>
                <li>
                    <img src="images/nav/08.JPG" width="183" height="125" />
                    <div></div>
                    <p>百度一下你就知道</p>
                </li>

                <li>
                    <img src="images/nav/09.JPG" width="183" height="125" />
                    <div></div>
                    <p>百度一下你就知道</p>
                </li>
                <li>
                    <img src="images/nav/10.JPG" width="183" height="125" />
                    <div></div>
                    <p>百度一下你就知道</p>
                </li>
                <li>
                    <img src="images/nav/11.JPG" width="183" height="125" />
                    <div></div>
                    <p>百度一下你就知道</p>
                </li>
                <li>
                    <img src="images/nav/12.JPG" width="183" height="125" />
                    <div></div>
                    <p>百度一下你就知道</p>
                </li>
                <li>
                    <img src="images/nav/13.JPG" width="183" height="125" />
                    <div></div>
                    <p>百度一下你就知道</p>
                </li>
                <li>
                    <img src="images/nav/14.JPG" width="183" height="125" />
                    <div></div>
                    <p>百度一下你就知道</p>
                </li>
                <li>
                    <img src="images/nav/15.JPG" width="183" height="125" />
                    <div></div>
                    <p>百度一下你就知道</p>
                </li>
                <li>
                    <img src="images/nav/16.JPG" width="183" height="125" />
                    <div></div>
                    <p>百度一下你就知道</p>
                </li>

                <li>
                    <img src="images/nav/17.JPG" width="183" height="125" />
                    <div></div>
                    <p>百度一下你就知道</p>
                </li>
                <li>
                    <img src="images/nav/18.JPG" width="183" height="125" />
                    <div></div>
                    <p>百度一下你就知道</p>
                </li>
                <li>
                    <img src="images/nav/19.JPG" width="183" height="125" />
                    <div></div>
                    <p>百度一下你就知道</p>
                </li>
                <li>
                    <img src="images/nav/04.JPG" width="183" height="125" />
                    <div></div>
                    <p>百度一下你就知道</p>
                </li>
                <li>
                    <img src="images/nav/05.JPG" width="183" height="125" />
                    <div></div>
                    <p>百度一下你就知道</p>
                </li>
                <li>
                    <img src="images/nav/06.JPG" width="183" height="125" />
                    <div></div>
                    <p>百度一下你就知道</p>
                </li>
                <li>
                    <img src="images/nav/07.JPG" width="183" height="125" />
                    <div></div>
                    <p>百度一下你就知道</p>
                </li>
                <li>
                    <img src="images/nav/08.JPG" width="183" height="125" />
                    <div></div>
                    <p>百度一下你就知道</p>
                </li>


            </ul>
        </div>
    </div>
    <div class="louceng" style="background: url('./images/bg_framework_866af1c.png');background-size:cover;">
        <div class="title">美女和帅哥 <span>girl/boy</span></div>
        <div class="wrapper con" style="background: none;">
            <ul class="tab">
                <li class="tab-item active">美女1<span>◆</span></li>
                <li class="tab-item">帅哥1<span>◆</span></li>
                <li class="tab-item">美女2<span>◆</span></li>
                <li class="tab-item">帅哥2<span>◆</span></li>
                <li class="tab-item">美女3<span>◆</span></li>
                <li class="tab-item">帅哥3</li>
            </ul>
            <div class="products">
                <div class="main selected">
                    <a href="#"><img src="./images/nav/guojidapai.jpg" alt="" width="1150" height="500"/></a>
                </div>
                <div class="main">
                    <a href="#"><img src="./images/nav/guozhuangmingpin.jpg" alt="" width="1150" height="500"/></a>
                </div>
                <div class="main">
                    <a href="#"><img src="./images/nav/qingjieyongpin.jpg" alt="" width="1150" height="500"/></a>
                </div>
                <div class="main">
                    <a href="#"><img src="./images/nav/nanshijingpin.jpg" alt="" width="1150" height="500"/></a>
                </div>
                <div class="main">
                    <a href="#"><img src="./images/nav/yys4lou05.jpg" alt="" width="1150" height="500"/></a>
                </div>
                <div class="main">
                    <a href="#"><img src="./images/nav/yys4lou06.jpg" alt="" width="1150" height="500"/></a>
                </div>
            </div>
        </div>
    </div>
    <div class="louceng" style="background: url('images/bg_framework_866af1c.png'),url('images/loading_flash_1a21a70.png');background-size: cover;">
        <div class="title">人物角色 <span>person</span></div>
        <div class="picture_scroll con" style="background: none;">
            <div class="picture_scroll1 "><img src="./images/nav/role_bqn.png" alt=""></div>
            <div class="picture_scroll2 "><img src="./images/nav/role_qm.png" alt=""></div>
        </div>
    </div>
    <div class="louceng" style="background: url('./images/bg_framework_866af1c.png');background-size:cover;">
        <div class="title">6.商品<span>product</span></div>
        <div class="nav_css con" style="background: none;">
            <ul>
                <li><img src="./images/nav/01.JPG" alt="" width="180"></li>
                <li><img src="./images/nav/02.JPG" alt="" width="180"></li>
                <li><img src="./images/nav/03.JPG" alt="" width="180"></li>
                <li><img src="./images/nav/04.JPG" alt="" width="180"></li>
                <li><img src="./images/nav/05.JPG" alt="" width="180"></li>
                <li class='six'><img src="./images/nav/06.JPG" alt="" width="180"></li>
                <li><img src="./images/nav/07.JPG" alt="" width="180"></li>
                <li><img src="./images/nav/08.JPG" alt="" width="180"></li>
                <li><img src="./images/nav/09.JPG" alt="" width="180"></li>
                <li><img src="./images/nav/10.JPG" alt="" width="180"></li>
                <li><img src="./images/nav/11.JPG" alt="" width="180"></li>
                <li><img src="./images/nav/12.JPG" alt="" width="180"></li>
                <li><img src="./images/nav/13.JPG" alt="" width="180"></li>
                <li><img src="./images/nav/14.JPG" alt="" width="180"></li>
            </ul>
        </div>
    </div>
    <div class="louceng" style="height: 60px;">
        <div class="title" style="text-align: center; color:red;">瀑布流 <span>water</span></div>
        <!--<div class="con">居家</div>-->
    </div>
<!--    <div class="louceng">
        <div class="title">8.母婴 <span>MUYIN</span></div>
        <div class="con">母婴</div>
    </div>-->
<!--    <div class="louceng">
        <div class="title">商品展示 <span>product</span></div>
    </div>-->

    <!--瀑布流特效开始-->
    <div id="main_water" class="main_water con" style="background: none;">
        <div class="box"><div class="pic"><img src="./images/water/01.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/02.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/03.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/04.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/05.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/06.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/07.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/08.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/09.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/10.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/11.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/12.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/13.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/14.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/15.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/16.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/17.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/18.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/19.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/20.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/21.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/22.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/23.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/24.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/25.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/26.jpg" alt=""></div></div>
  <!--      <div class="box"><div class="pic"><img src="./images/water/img27.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/img28.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/img29.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/img30.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/img31.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/img32.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/img33.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/img34.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/img35.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/img36.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/img37.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/img38.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/img39.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="./images/water/img40.jpg" alt=""></div></div>-->
    </div>
    <script src="./js/Underscore-min.js"></script>
    <!--瀑布流结束-->

    <!--<div class="louceng">
        <div class="title">10.图书 <span>TUSHU</span></div>
        <div class="con">图书</div>
    </div>-->
    <!--<div class="louceng">-->
        <!--<div class="title">11.服务 <span>FUWU</span></div>-->
        <!--<div class="con">服务</div>-->
    <!--</div>-->
</div>
<!--楼层盒子部分结束-->
<script type="text/javascript">
    /*
     totop  //返回顶部按钮
     fixedevery   // 左侧固定导航的每一项
     louceng  //模块的每一项
     header   //头部
     */
    $(function(){
        var obj = new floor('.totop','.fixedmeau>li','.louceng_box>.louceng','.header_box');
        obj.init()
    });
</script>

<!--楼层特效结束-->
<!-- tab音乐栏-->
<script>
    //tab音乐导航栏
    // 1. 获取标签
    var allLis = document.querySelector(".header_tab #nav ul").children;
    // 2. 改变li的背景背景
    for(var i=0; i<allLis.length; i++){
        allLis[i].style.backgroundPosition = '0 ' + i * -40 + 'px';
        // 2.1 监听鼠标进入
        allLis[i].onmouseover = function () {
            // 2.2 缓动动画
            buffer(this.children[1], {top: 0});

            // 2.3 播放音乐
            this.children[2].play();
            this.children[2].currentTime = 0;
        };
        // 2.2 监听鼠标离开
        allLis[i].onmouseout = function () {
            buffer(this.children[1], {top: 40});
        }
    }
    // 3. 监听键盘的点击事件
    document.onkeydown = function (event) {
        var e = event || window.event;
        // console.log(e.keyCode);
        var keyCode = e.keyCode - 49;
        buffer(allLis[keyCode].children[1], {top: 0}, function () {
            buffer(allLis[keyCode].children[1], {top: 40});
        });
        // 3.1 播放音乐
        allLis[keyCode].children[2].play();
        allLis[keyCode].children[2].currentTime = 0;
    };

</script>
<script>
/*    var tab_nav = document.querySelector(".header_box .header_tab #nav");
    var nav_top_height = tab_nav.offsetTop;

    // console.log(tab_nav);
    // 2. 监听窗口滚动
    window.onscroll = function () {
        var scroll_top_height = scroll().top;
        console.log(scroll_top_height);

        // 2.1 判断
        if(scroll_top_height >= nav_top_height){
            tab_nav.className = "nav";
            // neirong.style.paddingTop = nav.offsetHeight + "px";
            // console.log(neirong.style.paddingTop);
        }else {
            tab_nav.className = "";
            //neirong.style.paddingTop = "0px";
        }
    }*/
</script>

<!--星空闪烁特效-->
<script>
    // 1. 求出屏幕的尺寸
    var screenW = document.documentElement.scrollWidth;
    var screenH = document.documentElement.scrollHeight;

    // 2. 动态创建星星
    for(var i=0; i<150; i++){
        // 2.1 创建星星
        var star_span = document.createElement('span');// 创建元素span
        star_span.className = "star_span";
        document.body.appendChild(star_span); // 把创建的span添加到body标签内

        // 2.2 获取随机的坐标
        var star_x = parseInt(Math.random() * screenW);
        var star_y = parseInt(Math.random() * screenH);
        // 添加span样式的left值和top值
        star_span.style.left = star_x + 'px';
        star_span.style.top = star_y + 'px';

        // 2.3 随机缩放
        var star_scale = Math.random() * 1.5;
        star_span.style.transform = 'scale('+ star_scale + ', ' + star_scale + ')';

        // 2.4 频率
        var star_rate = Math.random() * 1.5;
        // 延时执行
        star_span.style.animationDelay = star_rate + 's';
    }
</script>
</body>
</html>

